<template>
  <div>
    <div class="back">
      <img src="../../../../../assets/back.png" alt="" @click="handleBack" />
    </div>
    <div class="task-map">
      <div class="title">
        <section>
          <span class="bold">车流量检测</span>
          <span>当前网络速度：936kb/s</span>
        </section>
        <section style="display: flex; align-items: center">
          <img style="margin-right: 1vh" src="../../../../../assets/flaybg12.png" alt="" />
          <img src="../../../../../assets/flaybg13.png" alt="" />
        </section>
      </div>
      <div class="car">
        <div class="task-message">
          <div class="cabin-img" :style="'background-image: url(' + getImageUrl('flaybg8.png') + ');'">
            <p class="task-bold">123辆</p>
            <p class="">累计车辆</p>
          </div>
          <div class="cabin-img" :style="'background-image: url(' + getImageUrl('flaybg7.png') + ');'">
            <p class="task-bold">23辆</p>
            <p class="">实时车辆</p>
          </div>
        </div>
      </div>
      <div class="mse_box">
        <!-- <div id="mse"></div> -->
        <video id="my-video" controls>
          <source :src="videoSource" type="video/mp4" />
        </video>
      </div>
    </div>
    <div class="task-img">
      <h3 class="task-img-title">
        拍摄图片 <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
      </h3>
      <div class="task-img-list">
        <div class="task-img-item" v-for="(item, index) in imgList" :key="index">
          <img class="task-img-icon" src="../../../../../assets/u4660.png" alt="" />
          <div class="task-text">
            <p>
              <span>{{ item.time }}</span>
              <span>{{ item.address }}</span>
            </p>
            <p>
              <span>经度:{{ item.longitude }}</span>
              <span>纬度{{ item.latitude }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElRow, ElCol } from 'element-plus';
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue';
// import Player from 'xgplayer';
// import 'xgplayer/dist/index.min.css';
import Plyr from "plyr";
import "plyr/dist/plyr.css";
import { useRouter } from 'vue-router';
import { openWindow } from '@vben/utils';
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href
}
const props = defineProps({ imgList: Array });
const router = useRouter();
const handleBack = () => {
  router.go(-1);
};
const options = {}
let player = '';
const video_option = {
  loadSprite: false,
  iconUrl: '/static/plyr.svg'
}
onMounted(() => {
  // new Player({
  //   id: 'mse', //元素id
  //   lang: 'zh', //设置中文
  //   volume: 0, // 默认静音
  //   autoplay: false, //自动播放
  //   screenShot: true, // 开启截图功能
  //   //视频地址
  //   url: '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
  //   // url: 'https://www.bilibili.com/video/BV1ug41137sQ/?spm_id_from=333.1387.favlist.content.click&vd_source=eb247b9b2ce357e3dc4a9f4976802939',
  //   //封面图
  //   poster:
  //     '//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg',
  //   // fluid: true, // 填满屏幕 （流式布局）
  //   playbackRate: [0.5, 0.75, 1, 1.5, 2], //传入倍速可选数组
  //   // height: '100%',
  // });
  const video = document.getElementById("my-video");

  // 初始化Plyr实例
  if (video) {
    player = new Plyr(video, video_option);
    player.on("play", () => {
      console.log("视频开始播放");
    });
    // 监听暂停事件
    player.on("pause", () => {
      console.log("视频暂停");
    });
  }
});
const videoSource = ref("https://tv.cctv.com/de2a8903-84ad-4fda-81e2-2038aab9e31b");
const changeVideoSource = (newSource) => {
  videoSource.value = newSource;
  if (player) {
    // 销毁旧的Plyr实例
    player.destroy();
    // 获取更新后的视频元素
    const video = document.getElementById("my-video");
    if (video) {
      // 重新初始化Plyr实例
      player = new Plyr(video, video_option);
    }
  }
};
onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.task-map {
  position: relative;
  width: 100%;
  height: 52vh;
  // min-height: 670px;
  overflow: hidden;
  // border: 1px solid #fff;

  .title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 4vh;
    padding: 0 1vh;
    background: rgb(2 44 47 / 60%);
    font-size: 1.8vh;

    .bold {
      margin-right: 1vh;
      font-weight: bold;
      color: #fffefe;
    }

    img {
      width: 2vh;
      height: 2vh;
    }
  }

  .mse_box {
    width: 100%;
    height: 100%;

    :deep(.plyr) {
      width: 100%;
      height: 100%;
    }

    #my-video {
      width: 100% !important;
      height: 100% !important;
    }
  }

  .car {
    position: absolute;
    top: 4vh;
    left: 1vh;
    z-index: 1;
    display: flex;

    .task-message {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .cabin-img {
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: calc(8.5vw);
        margin: 0 0.5vh;
        margin-top: 1vh;
        height: 3.2vw;
        padding-left: 3.5vw;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
          font-size: 0.8vw;
        }

        .task-bold {
          font-weight: bold;
        }
      }
    }
  }
}

.task-img {
  width: 100%;
  height: 28.5vh;
  margin-top: 0.5vh;
  background: rgb(2 19 20 / 52%);
  border: 0.01vh solid;
  border-image: radial-gradient(circle,
      rgb(36 229 241 / 17%),
      rgb(255 255 255 / 17%)) 1 1;

  .task-img-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 4vh;
    padding-left: 1.5vh;
    margin: 0;
    font-family: PingFangSC, 'PingFang SC';
    font-size: 2vh;
    font-weight: 500;
    color: #fffefe;
    user-select: none;
    background: radial-gradient(ellipse 140% 300% at 100% 50%,
        rgba(1, 34, 35, 0.2) 28%,
        rgba(7, 217, 221, 0.7) 100%);

    .icon {
      width: 3vh;
      margin-right: 1vw;
    }
  }

  .task-img-list {
    display: flex;
    height: 24vh;

    .task-img-item {
      height: 100%;
      padding: 0.5vh;

      .task-text {
        font-size: 1.3vh;
        padding: 0 1vh;
        padding-top: 0.5vh;

        p {
          display: flex;
          justify-content: space-between;
        }
      }

      .task-img-icon {
        width: 100%;
        height: 17vh;
      }
    }
  }
}

.back {
  width: 100%;
  height: 4vh;
  margin-top: 3vh;
  margin-bottom: 1vh;


  img {
    height: 100%;
  }
}
</style>
